﻿<%@ Page Title="Thư Viện - Tiếng Nhật Thật Dễ" Language="C#" MasterPageFile="~/Admin/AdminMTP.Master" AutoEventWireup="true" CodeBehind="Gallery.aspx.cs" Inherits="SQT.tracnghiem.Admin.Gallery" %>

<%@ Import Namespace="DataAccess" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="main-admin">
        <header class="admin-header-tittle w3-padding w3-large w3-center w3-teal">Thư viện</header>
        <div class="w3-hide">
            <audio id="gallery_audio"></audio>
        </div>
        <div class="w3-row w3-display-container">
            <div class="gal-top w3-row w3-card-2">
                <div id="gal_Create" class="w3-col l2 dropdown" style="display:none">
                    <a data-toggle="dropdown" href="javascript:;" class="w3-btn w3-teal dropdown-toggle"><i class="fa fa-plus"></i>&nbsp;Thêm mới</a>
                    <div class="dropdown-menu">
                        <ul class="gal-menu">
                            <li><a onclick="$('#themthumuc').fadeIn()"><i class="gal-menu-icon fa fa-folder"></i>Thư mục</a></li>
                            <li><a onclick="$('#themtaptin').fadeIn()"><i class="gal-menu-icon fa fa-file"></i>Hình ảnh/Âm thanh</a></li>
                            <li><a onclick="$('#themvideo').fadeIn()"><i class="gal-menu-icon fa fa-file"></i>Video</a></li>
                        </ul>
                    </div>
                </div>
                <a href="javascript:;" class="gal-view-type-btn w3-btn w3-teal w3-right" title="Xem kiểu lưới"><i class="fa fa-th-large"></i></a>
                <div class="gal-search-box w3-col w3-right">
                    <input id="txt_search_file" type="text" placeholder="Tìm kiếm theo tên thư mục, tập tin, video..." class="gal-search-input w3-right" autofocus="autofocus" /><a href="javascript:;" class="gal-search-btn w3-btn w3-teal w3-right" title="Tìm kiếm"><i class="fa fa-search"></i></a><a href="javascript:;" class="gal-close-search-btn w3-btn w3-teal w3-right" title="Đóng"><i class="fa fa-times"></i></a>
                </div>
                <div id="themthumuc" class="w3-modal">
                    <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 25%">
                        <header class="w3-padding w3-center w3-large">Thư mục mới</header>
                        <div class="w3-row w3-padding">
                            <input type="text" id="txt_Folder_Name" class="w3-col l12 class-editor" placeholder="Nhập tên thư mục" value="" />
                        </div>
                        <div class="w3-row w3-padding w3-center">
                            <a onclick="btn_create_folder()" class="w3-btn w3-teal w3-border"><i class="fa fa-save"></i>&nbsp;Tạo</a>
                            <a onclick="$('#themthumuc').fadeOut()" class="w3-btn w3-teal w3-border">&times;&nbsp;Hủy</a>
                        </div>
                    </div>
                </div>
                <div id="themtaptin" class="w3-modal">
                    <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                        <header class="w3-padding w3-center">
                            <span class="w3-large">Tải lên Hình ảnh/Âm thanh</span>
                        </header>
                        <div class="w3-row w3-padding w3-center">
                            <input type="file" class="changewallpaper" name="fileUpload" id="fileUpload" />
                            <label for="fileUpload" class="w3-btn w3-border w3-teal"><i class="fa fa-folder"></i>&nbsp;Chọn tập tin</label>
                        </div>
                        <div class="w3-row w3-padding w3-center">
                            <video style="max-width: 100%; display: none" class="media-upload-sound" id="audio_upload" poster="../Content/img/posterdefault.jpg" controls="controls"></video>
                            <img id="img_upload" src="../Content/img/posterdefault.jpg" style="max-width: 100%; display: none" />
                        </div>
                        <div id="upload_name" class="w3-row w3-center" style="display: none">
                            <input type="text" id="txt_file_name" autofocus="autofocus" placeholder="Đặt tên cho tập tin" style="width: 50%" maxlength="30" class="class-editor w3-center" />
                        </div>
                        <div class="w3-row w3-padding w3-center">
                            <a id="btn_upload_file" class="w3-btn w3-teal w3-border"><i class="fa fa-upload"></i>&nbsp;Tải lên</a>
                            <a class="w3-btn w3-teal w3-border" onclick="$('#themtaptin').fadeOut()">&times;&nbsp;Hủy</a>
                        </div>
                    </div>
                </div>
                <div id="themvideo" class="w3-modal">
                    <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                        <header class="w3-padding w3-center">
                            <span class="w3-large">Nhúng video</span>
                        </header>
                        <div class="w3-row w3-padding">
                            <label class="w3-quarter">Đường dẫn</label><input id="txt_video_link" type="text" placeholder="Nhập đường dẫn của video" maxlength="30" class="class-editor w3-threequarter" />
                        </div>
                        <div class="w3-row w3-padding">
                            <label class="w3-quarter">Hướng dẫn</label><span class="w3-threequarter">Copy chuỗi phía sau "https://www.youtube.com/watch?v=". Ví dụ: "https://www.youtube.com/watch?v=<i class="w3-text-red">6zM64jNLQt8</i>"</span>
                        </div>
                        <div class="w3-row w3-padding">
                            <label class="w3-quarter">Tên video</label><input id="txt_video_name" type="text" placeholder="Đặt tên cho video" maxlength="30" class="class-editor w3-threequarter" />
                        </div>
                        <div class="w3-row w3-padding w3-center">
                            <a class="w3-btn w3-teal w3-border" id="btn_upload_video"><i class="fa fa-film"></i>&nbsp;Nhúng</a>
                            <a class="w3-btn w3-teal w3-border" onclick="$('#themvideo').fadeOut()">&times;&nbsp;Hủy</a>
                        </div>
                    </div>
                </div>
                <div id="xemkieugi" class="w3-modal">
                    <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                        <header class="w3-large w3-padding w3-center">Chức năng này để sau nha ahihi</header>
                        <div class="w3-padding w3-center"><a onclick="$('#xemkieugi').fadeOut()" class="w3-btn w3-teal w3-border">Ok ahihi</a></div>
                    </div>
                </div>
            </div>
            <div class="gal-left w3-col">
                <div class="gal-left-blank">&nbsp;</div>
                <div class="gal-left-content">
                    <ul class="gal-menu">
                        <li class="gal-all-folder-item">
                            <a onclick="gal_open_menu_left(event, 'allfolder',0);open_folder(0,'Tất cả thư mục');title_top_default();" class="gal-menu-item"><i class="gal-show-folder-btn fa fa-caret-right w3-large"></i><i class="gal-menu-icon fa fa-floppy-o"></i>Tất cả thư mục</a>
                            <ul id="folderLeft0" class="gal-menu gal-sub-menu">
                            </ul>
                        </li>
                        <li><a id="open_trash" onclick="gal_open_trash(event, 'allfolder')" class="gal-menu-item"><i class="gal-show-folder-btn fa w3-large"></i><i class="trash-icon gal-menu-icon fa fa-trash"></i>Thùng rác <%if(this.count_trash!=0){ %>(<label id="count_trash"><%=this.count_trash %></label>)<%} %></a></li>
                    </ul>
                </div>
            </div>
            <div class="gal-middle w3-col">
                <div class="gal-middle-blank">&nbsp;</div>
                <div class="gal-middle-resize">&nbsp;</div>
            </div>
            <div class="gal-right w3-rest">
                <div id="folder_title_area" class="gal-right-blank">
                    <%--<span class="gal-title">Tên thư mục cha</span><i class="gal-link-sign fa fa-angle-right"></i><span class="gal-title gal-active">Tên thư mục đang mở</span>--%>
                </div>
                <div id="allfolder" class="gal-right-content">
                    <%--<div class="gal-folder-empty w3-row">
                        <div class="w3-col l1 w3-center w3-jumbo">
                            <i class="fa fa-file-audio-o"></i>
                        </div>
                        <div class="w3-col l11 w3-text-grey w3-padding">
                            <p class="w3-padding-top"><span class="w3-large">Chưa có tập tin hoặc thư mục nào trong <b>thư mục này</b>.</span><br />
                                Thêm những tập tin hoặc thư mục mới bằng cách sử dụng nút "Thêm mới".
                            </p>
                        </div>
                    </div>--%>
                    <div id="folder_area">

                    </div>
                </div>
                <div id="trash" class="gal-right-content">

                </div>
            </div>
        </div>
    </div>
    <div id="gal-view-img-modal" class="gal-view-img-modal w3-modal">
        <div class="gal-view-img-content w3-display-container w3-animate-zoom">
            <img id="gal-view-img-target" class="w3-image" />
            <i onclick="gal_close_img()" class="gal-close-modal-btn w3-closebtn w3-padding w3-text-white w3-opacity w3-hover-opacity-off w3-display-topright fa fa-times" title="Đóng" data-toggle="tooltip" data-placement="bottom"></i>
            <div id="gal-view-img-name" class="w3-row w3-padding w3-center"></div>
        </div>
    </div>
    <div id="gal-watch-video-modal" class="w3-modal">
        <div class="w3-modal-content gal-watch-video-modal  w3-animate-top">
            <i onclick="gal_stop_video()" class="gal-close-modal-btn w3-closebtn w3-padding w3-text-white w3-opacity w3-hover-opacity-off w3-display-topright fa fa-times" title="Đóng" data-toggle="tooltip" data-placement="bottom"></i>
            <iframe id="gal-watch-video-target" class="gal-video-target"></iframe>
            <div id="gal-watch-video-name" class="w3-row w3-padding w3-center"></div>
        </div>
    </div>
    <div id="gal-rename" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 25%">
            <header class="w3-padding w3-center w3-large">Đổi tên</header>
            <div class="w3-row w3-padding">Nhập tên mới cho thư mục/tập tin:</div>
            <div class="w3-hide" id="rename_id"></div>
            <div class="w3-row w3-padding">
                <input type="text" id="rename_Gal" class="w3-col l12 class-editor" placeholder="Nhập tên thư mục" />
            </div>
            <div class="w3-row w3-padding w3-center">
                <a onclick="btn_rename()" class="w3-btn w3-teal w3-border"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                <a onclick="$('#gal-rename').fadeOut()" class="w3-btn w3-teal w3-border">&times;&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="gal-move" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 25%">
            <header class="w3-padding w3-center w3-large">Di chuyển</header>
            <div class="w3-row w3-padding">Chọn thư mục muốn chuyển đến:</div>
            <div id="move_id" class="w3-hide"></div>
            <div class="w3-row">
                <ul class="gal-menu w3-white">
                    <li>
                        <a ondblclick="gal_open_menu(event, 'allfolder','0')" class="gal-menu-item"><i class="w3-hide folder_id">0</i><i class="gal-show-folder-btn fa fa-caret-right w3-large"></i><i class="gal-menu-icon fa fa-floppy-o"></i>Tất cả thư mục</a>
                        <ul id="folder0" class="gal-menu gal-sub-menu">
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="w3-row w3-padding w3-center">
                <a onclick="btn_move()" class="w3-btn w3-teal w3-border"><i class="fa fa-arrow-circle-down"></i>&nbsp;Di chuyển đến đây</a>
                <a onclick="$('#gal-move').fadeOut()" class="w3-btn w3-teal w3-border">&times;&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="gal-delete" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 30%">
            <div class="w3-hide" id="delete_id"></div>
            <header class="w3-padding w3-center w3-large">Xóa</header>
            <div class="w3-row w3-padding">Thư mục hoặc tập tin này sẽ được chuyển vào Thùng rác</div>
            <div class="w3-row w3-padding w3-center">
                <a onclick="btn_delete()" class="w3-btn w3-teal w3-border"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>
                <a onclick="$('#gal-delete').fadeOut()" class="w3-btn w3-teal w3-border">&times;&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="gal-detroy" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 25%">
            <header class="w3-padding w3-center w3-large">Xóa vĩnh viễn</header>
            <div id="detroy_id" class="w3-hide"></div>
            <div class="w3-row w3-padding">
                Thư mục hoặc tập tin này sẽ bị xóa vĩnh viễn.<br />
                <b>Lưu ý: Bạn không thể khôi phục tác vụ này !</b>
            </div>
            <div class="w3-row w3-padding w3-center">
                <a onclick="btn_detroy()" class="w3-btn w3-teal w3-border"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>
                <a onclick="$('#gal-detroy').fadeOut()" class="w3-btn w3-teal w3-border">&times;&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="success-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none; z-index: 10">
        <div class="w3-teal w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-check"></i>&nbsp;<span id="success_content"></span></header>
        </div>
    </div>
    <div id="error-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none; z-index: 10">
        <div class="w3-red w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-times"></i>&nbsp;<span id="error_content"></span></header>
        </div>
    </div>
    <script src="../Scripts/galleryjava.js"></script>
    <script>window.onload = gal_sub_menu();</script>
    <script src="../Ajax/JS/EffectFly.js"></script>
</asp:Content>
